const centerPosition = ["21%", "50%"];
const ringChartsList = [
  {
    name: "正常设备",
    center: centerPosition,
    radius: ["70%", "75%"],
    color: ["#91A9B2", "rgba(212, 222, 236, 0.1)"]
  },
  {
    name: "离线设备",
    center: centerPosition,
    radius: ["50%", "55%"],
    color: ["#FFB89C", "rgba(212, 222, 236, 0.1)"]
  },
  {
    name: "故障设备",
    center: centerPosition,
    radius: ["30%", "35%"],
    color: ["#87CDFF", "rgba(212, 222, 236, 0.1)"]
  }
];

// 获取折线类型
const pieType = ringChartsList.reduce((arr, item) => {
  return arr.concat(item.name);
}, []);

/**
 * 多环形图配置处理方法
 * @param {Array<Object>} data 传入相关数据
 * @returns {Object} 返回 Echarts Option 配置
 */
export const multipleRingOptionHandler = (data = []) => {
  const seriesList = [];
  data.forEach((item, index) => {
    const chartsData = ringChartsList[index];
    seriesList.push(createRingChart(item, { ...chartsData }));
  });

  return {
    legend: {
      left: "50%",
      top: "35%",
      itemGap: 20,
      itemWidth: 8,
      itemHeight: 8,
      orient: "vertical",
      data: pieType,
      formatter: name => {
        const placeholder = `\t\t\t\t`;
        const { value, rate } = data.find(item => item.name == name);
        return `${name}${placeholder}${value}个${placeholder}${rate}%`;
      },
      textStyle: { fontSize: 12, color: "#fff" }
    },

    graphic: createGraphicConf(data),

    series: seriesList
  };
};

/**
 * 创建环形图配置处理方法
 * @param {Object} data 传入相关数据
 * @param {Object} options 传入相关配置数据
 * @returns {Object} 返回 Echarts Series Ring Option 配置
 */
const createRingChart = (data, options = {}) => {
  const diffVal = 100 - data.rate;
  return {
    type: "pie",
    radius: ["30%", "35%"],
    data: [
      {
        value: diffVal,
        itemStyle: { color: options.color[1] }
      },
      {
        value: data.rate,
        itemStyle: { color: options.color[0] }
      }
    ],
    label: { show: false },
    ...options
  };
};

/**
 * 创建相关 Graphic 配置方法
 * @param {Object} data 传入相关数据
 * @returns {Object} 返回 Echarts Option Graphic 配置
 */
const createGraphicConf = data => {
  const total = data.reduce((total, item) => total + item.value, 0);

  return {
    top: "18%",
    left: "52%",
    type: "text",
    style: {
      text: `设备总数\t\t\t\t${total}个`,
      textAlign: "center",
      fill: "#fff",
      fontSize: 14,
      lineHeight: 14
    }
  };
};
